import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import store from '@/.storybook/store'
import Glossar from '../../../pages/glossar.vue'

<Meta
  title="Pages/Glossar"
  component={Glossar}
  argTypes={{
    isLoading: {
      control: { type: 'boolean' },
    },
    useStickySearch: { control: { type: 'boolean' } },
  }}
/>

export const Template = (args, { argTypes, viewMode }) => {
  if (viewMode === 'docs') {
    return {
      props: Object.keys(argTypes),
      components: { Glossar },
      store: store,
      template: '<Glossar :isLoading="isLoading" />',
    }
  } else {
    return {
      props: Object.keys(argTypes),
      components: { Glossar },
      store: store,
      template:
        '<Glossar :isLoading="isLoading" :useStickySearch="useStickySearch" />',
    }
  }
}

# Glossar results with sticky search

Please use full width view in order to see the sticky search working correctly.

<a href="?path=/story/pages-glossar--with-results-sticky">
  Go to the Canvas Tab
</a>

---

<a
  href="?id=pages-glossar--with-results-sticky&args=&viewMode=story"
  target="_blank"
>
  Open page in full width in a new tab
</a>

<Canvas>
  <Story
    name="With results sticky"
    args={{
      isLoading: false,
      useStickySearch: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Glossar results

<a href="?path=/story/pages-glossar--with-results">Go to the Canvas Tab</a>

---

<a href="?id=pages-glossar--with-results&args=&viewMode=story" target="_blank">
  Open page in full width in a new tab
</a>

<Canvas>
  <Story
    name="With results"
    args={{
      isLoading: false,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
